<template>
     <view class="">
   
        <!-- 评价数据列表 -->
        <navigator :url="'/pages/evaluate/detail?id='+item.id" hover-class="none" open-type="navigate" class="flex flex-column pj-item mar-t-18" v-for="(item,index) in range" :key="index">
            <view class="flex align-center">
                <view class="pj-user-avator ">
                    <image :src="item.user.avatar" :class="{blur:item.anonymous =='yes'}"></image>
                </view>
                <view class="pj-user-name mar-l-10">
                    <text class="font-color-333 font-size-16 ">{{item.anonymous == 'no'?item.user.nickname:'匿名用户'}}</text>
                </view>
            </view>
            <view class=" mar-t-5">
                <text class="font-color-A7AABB font-size-13">{{transformTime(item.create_time)}}</text>
            </view>
            <view class=" mar-t-5">
                <text class="tq-line-2 font-color-999 font-size-15">{{item.remark||''}}</text>
            </view>
            <view class="flex justify-end font-color-A7AABB">
                <view class="flex align-center">
                    <mk-icon :src="''" :height="30" :width="30"></mk-icon>
                    <text v-if="item.comments_num>0">{{item.comments_num}}</text>
                    <text v-else>评论</text>
                </view>
                <view class="mar-l-10 mar-r-10 flex align-center font-color-A7AABB" @click.stop="like(index)">
                    <mk-icon :src="item.is_like == true?'':''" :height="30" :width="30"></mk-icon>
                    <text v-if="item.likes_num>0">{{item.likes_num}}</text>
                     <text v-else>点赞</text>
                </view>
            </view>
        </navigator>
        
        <!-- 评价列表结束 -->
    </view>
</template>

<script>
import mkIcon from './mk-icon.vue'
import {likeCreate,likeCancel} from '@/utils/http'
export default {
    components: { mkIcon },
    props:['range'],
    methods: {
        like(index){
           
            if( this.range[index].is_like == true){
                this.likeCancel(this.range[index].id,'evaluate',index);
            }else{
                this.likeCreate(this.range[index].id,'evaluate',index);
            }
            
        },
        likeCreate(liketable_id,liketable_type,index){
             likeCreate({liketable_id,liketable_type}).then(res=>{
                if(res){
                    this.range[index].is_like  = true
                    this.range[index].likes_num++
                    
                }
            })
        },
        likeCancel(liketable_id,liketable_type,index){
             likeCancel({liketable_id,liketable_type}).then(res=>{
                if(res){
                    this.range[index].is_like  = false
                    this.range[index].likes_num--
                }
            })
        }
    },
}
</script>

<style scoped>
.pj-item {
    padding: 14px;
    box-shadow: 2px 3px 10px 5px rgb(243, 240, 240);
    border-radius: 8px;
}
.pj-user-avator {
    /* background-color: #cccccc; */
   
}
.pj-user-avator image{
     height:1.94em;
    width: 1.94em;
    border-radius: 100%;
}
.blur{
    filter: blur(5rpx) brightness(70%);
}
</style>